import React, { useState } from 'react';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  HomeOutlined,
  VideoCameraOutlined,
  UserOutlined,
  AntDesignOutlined,
  EditOutlined
} from '@ant-design/icons';
import { Button, Layout, Menu, theme, Avatar, Typography, Divider } from 'antd';
import User from '@/types/User';
import imgAvatar from '@/assets/avatar.jpg'
import { history, Outlet } from 'umi';

const { Paragraph } = Typography;
const { Header, Sider, Content } = Layout;
const App: React.FC = () => {
  const [rows, setRows] = useState(1);
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const article =
    "To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life";
  const [user, setUser] = useState<User>({
    avatar: imgAvatar,
    name: 'lewis',
    uid: '001',
    signature: 'stay hungry, stay foolish.'
  })
  const changeMenuItem = (item: any) => {
    history.push(`/${item.key}`);
  }

  return (
    <Layout className='w-screen h-screen'>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="w-full h-60 text-white flex flex-col justify-around items-center">
          <Avatar
            src={user.avatar}
            size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
          />
          <span style={{ display: collapsed ? 'none' : 'inline-block' }} className='text-2xl font-bold'>{user.name} {user.uid}</span>
          <Paragraph
            style={{ display: collapsed ? 'none' : 'block' }}
            className='text-white text-sm'
            ellipsis={{
              rows,
              expandable: false,
            }}
          >
            {user.signature}
          </Paragraph>
        </div>
        <Divider style={{ borderColor: "#FFFFFF" }} />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          onClick={changeMenuItem}
          items={[
            {
              key: 'home',
              icon: <HomeOutlined />,
              label: '首页',
            },
            {
              key: 'write',
              icon: <EditOutlined />,
              label: '写文章',
            },
            {
              key: 'mine',
              icon: <UserOutlined />,
              label: '我的',
            },
          ]}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
            }}
          />
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default App;